import React from 'react';
import { CheckCircle, AlertCircle } from 'lucide-react';
import { ScoreData } from '../utils/scoreCalculator';

interface ResultViewProps {
  scoreData: ScoreData;
  onHomeClick: () => void;
  onReview: () => void;
}

export const ResultView: React.FC<ResultViewProps> = ({
  scoreData,
  onHomeClick,
  onReview
}) => {
  const { score, correct, wrong, total } = scoreData;
  const isPass = score >= 60;

  return (
    <div className="h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
      <div className="bg-white rounded-3xl shadow-2xl p-8 w-full max-w-2xl animate-in zoom-in duration-300">
        <div className="text-center mb-8">
          <div
            className={`inline-flex items-center justify-center w-24 h-24 rounded-full mb-4 ${
              isPass ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
            }`}
          >
            {isPass ? (
              <CheckCircle className="w-12 h-12" />
            ) : (
              <AlertCircle className="w-12 h-12" />
            )}
          </div>
          <h2 className="text-4xl font-bold text-slate-800">{score} 分</h2>
          <p className="text-slate-500 font-medium mt-1">
            {isPass ? '干得漂亮！' : '继续加油！'}
          </p>
        </div>

        <div className="grid grid-cols-3 gap-4 mb-8">
          <div className="bg-slate-50 p-4 rounded-2xl text-center border border-slate-100">
            <div className="text-slate-400 text-xs uppercase tracking-wider font-bold">
              总题数
            </div>
            <div className="text-2xl font-bold text-slate-700">{total}</div>
          </div>
          <div className="bg-green-50 p-4 rounded-2xl text-center border border-green-100">
            <div className="text-green-600 text-xs uppercase tracking-wider font-bold">
              正确
            </div>
            <div className="text-2xl font-bold text-green-700">{correct}</div>
          </div>
          <div className="bg-red-50 p-4 rounded-2xl text-center border border-red-100">
            <div className="text-red-600 text-xs uppercase tracking-wider font-bold">
              错误
            </div>
            <div className="text-2xl font-bold text-red-700">{wrong}</div>
          </div>
        </div>

        <div className="flex gap-4">
          <button
            onClick={onHomeClick}
            className="flex-1 py-3 text-slate-600 font-medium hover:bg-slate-50 rounded-xl transition-colors"
          >
            返回首页
          </button>
          <button
            onClick={onReview}
            className="flex-1 bg-primary hover:bg-indigo-700 text-white font-bold py-3 rounded-xl shadow-lg shadow-primary/30 transition-all"
          >
            回顾错题
          </button>
        </div>
      </div>
    </div>
  );
};